<template>
  <data-table-app-page>
    <el-form slot="toolbar" inline>
      <el-form-item label="角色名称">
        <el-input
          v-model="queryForm.roleName"
          clearable
          style="width: 160px"
        />
      </el-form-item>
      <el-form-item label="状态">
        <type-select
          v-model="queryForm.status"
          :items="DictMan.items('enable')"
          style="width: 100px"
        />
      </el-form-item>
      <el-form-item>
        <data-table-query-button :queryParams="queryForm" />
      </el-form-item>
      <el-form-item style="margin-left: 16px">
        <el-button
          v-auth:add
          type="primary"
          icon="el-icon-plus"
          @click="onAddClick"
        >
          增加
        </el-button>          
      </el-form-item>
    </el-form>
    <data-table
      ref="table"
      url="/api/role/page?permissionCountOrder=desc"
      :default-sort="{prop: 'permissionCount', order: 'descending'}"
    >
      <el-table-column prop="id" label="角色ID" width="80" show-overflow-tooltip></el-table-column>
      <el-table-column prop="roleName" label="角色名称" width="140" show-overflow-tooltip></el-table-column>
      <el-table-column prop="remark" label="备注" width="300" show-overflow-tooltip></el-table-column>
      <el-table-column prop="permissionCount" label="权限数量" width="100" sortable />
      <el-table-column prop="status" label="启用" width="60" v-slot="{row}" fixed="right">
        <enable-status v-model="row.status" :role="row" :readonly="!$auth('status')" />
      </el-table-column>
      <el-table-column v-if="$auth(['update', 'permissions', 'assign-permissions'])" v-slot="{row}" label="操作" min-width="194px" fixed="right">
        <el-button
          v-auth:update
          type="text"
          size="medium"
          @click="onUpdateClick(row)"
        >
          修改
        </el-button>
        <el-button
          v-auth:permissions
          type="text"
          size="medium"
          @click="onAssignPermissionsClick(row, true)"
        >
          查看权限
        </el-button>
        <el-button
          v-auth:assign-permissions
          type="text"
          size="medium"
          @click="onAssignPermissionsClick(row)"
        >
          赋予权限
        </el-button>
      </el-table-column>
    </data-table>

    <edit-dialog ref="editDialog" />
    <assign-permissions-dialog ref="assignPermissionsDialog" />
  </data-table-app-page>
</template>
  
<script>
import EnableStatus from './EnableStatus';
import EditDialog from './EditDialog';
import AssignPermissionsDialog from './AssignPermissionsDialog';

export default {
  pageProps: {
    title: '角色管理'
  },
  components: {
    EnableStatus,
    EditDialog,
    AssignPermissionsDialog
  },
  data() {
    return {
      permission: '/system/role',
      queryForm: {
        roleName: '',
        status: null
      }
    }
  },
  watch: {
    'queryForm.status'() {
      this.$refs.table.query(this.queryForm);
    }
  },
  methods: {
    onAddClick() {
      this.$refs.editDialog.open();
    },
    onUpdateClick(role) {
      this.$refs.editDialog.open(role);
    },
    onAssignPermissionsClick(role, readonly) {
      this.$refs.assignPermissionsDialog.open(role, readonly);
    }
  }
}
</script>